<template>
    <div class="home">
        <!--头部导航栏部分-->
        <div class="head">
            <navbar :navList ="navList" />
        </div>
        <!--主体部分-->
        <div class="main">
            <router-view/>
        </div>
        
    </div>
</template>

<script>
import navbar from '../../components/common/navbar/navbar'
export default {
    name: 'Home',
    props: [

    ],
    data() {
        return {
            // 导航列表
            navList:[
                {title:'个性推荐'},
                {title:'歌单'},
                {title:'主播电台'},
                {title:'排行榜'},
                {title:'歌手'},
                {title:'最新音乐'},
            ],
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {
        navbar,
    },
};
</script>

<style scoped lang="less">
@mainColor:#2f3640;
@itemecolor:#fbc531;
@navLightColor:#273c75;
@textColor:#fff;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.home{
    width: 100%;
    height: calc(100vh - 49px * 2);
    background-color: @mainColor;
    overflow: auto;
    .head{
        width: 100%;
        height: 42px;
        // position: fixed;
        // top:49px;
        // margin: auto;
        // left: 0;
        // right: 0;
        // z-index: 3;
        
        border-bottom: 1px solid #e1e1e2;
    }
    .main{  
        width: 80%;
        height: 200px;
        margin: auto;
        position: relative;

    }
    
}
/*滚动条样式*/
  .home::-webkit-scrollbar {/*滚动条整体样式*/
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
  }
  .home::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #C8C8C8;
      background: rgba(0,0,0,0.2);
  }
  .home::-webkit-scrollbar-track {/*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px #C8C8C8;
      border-radius: 0;
      background: rgba(0,0,0,0.1);
  }

</style>
